<template>
	<view class="movie_detail">
		<!-- <view class="detail_bk">
			<image :src="img_src" mode=""></image>
		</view> -->
		<image :src="img_src" mode="" class="backImg"></image>
		<view class="detail_box">
			<view class="header_name">
				<text>{{name}}</text>
			</view>
			<view class="float_img">
				<image :src="img_src" mode=""></image>
			</view>
		</view>
		<view class="movie_info">
			<view class="movie_name">{{name}}</view>
			<view class="info_box">
				<view class="info_tag">
					<view>导演</view>
					<view>类型</view>
					<view>主演</view>
				</view>
				<view class="info_name">
					<view> {{director}}</view>
					<view> {{classify}}</view>
					<view> {{star}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="play_btn">
			<button @click="gotoPlay">立即播放</button>
		</view>
		<view class="movie_intro">
			<view class="title" user-select>
				剧情简介
			</view>
			<text>{{info}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: null,
				name: null,
				star: null,
				classify: null,
				director: null,
				img_src: null
			};
		},
		onLoad(options) {
			this.info = options.info,
				this.name = options.name,
				this.star = options.star,
				this.classify = options.classify,
				this.director = options.director,
				this.img_src = options.img_src
		},
		methods: {
			gotoPlay() {
				uni.navigateTo({
					url:`/subpkg/movie_play/movie_play?name=${this.name}&classify=${this.classify}`
				})
			}
		}
	}
</script>

<style lang="scss">
	// .detail_bk {
	// 	// 500 220n 400 176
	// 	height: 352rpx;
	// 	width: 100%;
	// 	border-radius: 15px;
	// 	overflow: hidden;
	// 	// position: relative; 
	// 	// 9fb1c5
	// 	box-shadow:0 0 20px 20px #9fb1c5;

	// 	image {
	// 		height: 352rpx;
	// 		width: 100%;
	// 		border-radius: 15px;
	// 		filter: blur(5px);
	// 		box-shadow:0 0 30px 20px #9fb1c5;
	// 	}
	// }

	.play_btn {
		width: 30%;
		margin-top: 10rpx;
		button {
			font-size: 12px;
			height: 30px;
			width: 100%;
			background-color: #23adce;
			border-radius: 6px;
		}
	}

	.backImg {
		height: 352rpx;
		width: 100%;
		border-radius: 15px;
		filter: blur(5px);
		box-shadow: 0 0 30px 20px #9fb1c5;
	}

	.detail_box {
		position: absolute;
		top: 0;
		background-color: rgba(255, 255, 255, 0.2);
		height: 352rpx;
		width: 100%;
		border-radius: 15px;
		// box-shadow: 0 0 30px 20px #949494 inset;

		.header_name {
			margin: 20px 10px;
		}

		text {
			color: #fff;
			font-weight: 700;
			font-size: 20px;
		}

		.float_img {
			// 150 210 120 168
			position: relative;

			image {
				position: absolute;
				right: 3%;
				height: 336rpx;
				width: 240rpx;
				border-radius: 5px;
			}
		}

	}

	.movie_info {
		display: flex;
		flex-direction: column;
		margin: 20px 20px;


		.movie_name {
			font-weight: 700;
		}

		.info_box {
			display: flex;
			margin: 15px 0;
			font-size: 14px;

			.info_tag {
				view {
					margin: 10rpx 20rpx;
					margin-left: 0;
					color: #b9b9b9;
					width: 80rpx;
				}
			}

			.info_name {
				view {
					margin: 10rpx 20rpx;
					color: #8e8e8e;
				}
			}
		}
	}

	.line {
		width: 100;
		border: 1rpx solid #d9d9d9;
	}

	.movie_intro {
		margin: 20px 20px;

		.title {
			font-weight: 700;
			margin-bottom: 20rpx;
		}

		text {
			font-size: 14px;
			color: #b3b3b3;

			white-space: normal;
			word-break: break-all;
			word-wrap: break-word;
		}
	}
</style>
